<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.ld.com/shield/tags" prefix="shield"%>
<%@ page trimDirectiveWhitespaces="true" %>
<fmt:setLocale value="zh_CN"/>
<shield:permssion type="button">
<div style="height: 600px;" class="show-info" id="userSeatContainer">
	<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
	<script type="text/javascript" src="${ctxPath}/js/lib/jquery.contextmenu.r2.js"></script>
	<style>
	.groupweb{background-color: rgb(255, 164, 164);}
	.grouppm{background-color: rgb(255, 255, 0);}
	.groupjava1{background-color: rgb(255, 192, 0);}
	.groupjava2{background-color: rgb(0, 176, 240);}
	.groupjava3{background-color: rgb(146, 208, 80);}
	.groupdata{background-color: rgb(0, 112, 192);}
	.table_noborder_td td.noborder_tb{border-top: 0px;border-bottom: 0px;}
	.table_noborder_td td.noborder_lr{border-left: 0px;border-right: 0px;}
	.table_noborder_td td.noborder_l{border-left: 0px;}
	.table_noborder_td td.noborder_r{border-right: 0px;}
	tr.noborder_center td{height: 60px;}
	.userseat_con{/* background-color: gray; */width: 300px;height: 200px;margin: 0;position: absolute;left: 25px;top:110px;text-align: center;}
	</style>
	<table class="tab-show">
		<colgroup>
			<col width="120">
			<col width="">
			<col width="">
			<col width="">
		</colgroup>
		<tr>
			<td >颜色标示说明：</td>
			<td class="colorgrouptips groupweb">前端组</td>
			<td class="colorgrouptips grouppm">项目管理组</td>
			<td class="colorgrouptips groupjava1">java开发1组</td>
			<td class="colorgrouptips groupjava2">java开发2组</td>
			<td class="colorgrouptips groupjava3">java开发3组</td>
			<td class="colorgrouptips groupdata">数据组</td>
		</tr>
	</table>
	<table class="tab-show table_noborder_td develop_seats_tables" style="width: 50%;float: left;">
	    <tbody>
	        <tr class="noborder_center">
	            <td style="font-weight: bold; color: red;" class="noborder_r">
	                A312
	            </td>
	            <td style="color: red;" class="noborder_lr ">
	                &nbsp; &nbsp;北（窗口）<br/>&nbsp; &nbsp; ↑→东<br/>（门口）
	            </td>
	            <td class="noborder_lr "></td>
	            <td style="text-align: center;" class="noborder_lr ">
	                窗女士
	            </td>
	            <td class="noborder_lr"></td>
	            <td class="noborder_l"></td>
	        </tr>
<c:set var="seatIdValue" value="0"></c:set>        
<c:forEach begin="1" end="3">
	        <tr class="datatr">
	<c:forEach begin="1" end="6">
		<%@include file="seatsInclude.jsp" %>
	</c:forEach>
	        </tr>
</c:forEach>
			<tr class="noborder_center">
	        	<td class="noborder_r "></td>
	        	 <td class="noborder_lr "></td>
	            <td class="noborder_lr "></td>
	            <td class="noborder_lr "></td>
	            <td class="noborder_lr "></td>
	            <td class="noborder_l">门先生</td>
			</tr>
	    </tbody>
	</table>
	<table class="tab-show table_noborder_td develop_seats_tables" style="width: 48%;float: left;margin-left: 20px;">
	    <tbody>
	    	 <tr class="noborder_center">
	        	<td style="font-weight: bold; color: red;" class="noborder_r ">
	                A313
	            </td>
	            <td class="noborder_lr "></td>
	            <td style="text-align: center;" class="noborder_lr ">
	                窗女士
	            </td>
	            <td class="noborder_lr "></td>
	            <td class="noborder_l"></td>
			</tr>
<c:set var="seatIdValue" value="18"></c:set>        
<c:forEach begin="1" end="3">
			<tr class="datatr">
	<c:forEach begin="1" end="5">
	   	<%@include file="seatsInclude.jsp" %>
	</c:forEach>
	        </tr>
</c:forEach>
			<tr class="noborder_center">
	        	<td class="noborder_r droppable">门先生</td>
	            <td class="noborder_lr "></td>
	            <td class="noborder_lr "></td>
	            <td class="noborder_lr "></td>
	            <td class="noborder_l"></td>
			</tr>
	    </tbody>
	</table>
	
	<div id="seatContextMenu" style="position: absolute;display: none;">
	    <ul>
	      <li id="seatContextMenuedit" data-url="${ctxPathA}/oa/seats/toAddOrUpdate">编辑</li>
	      <li id="seatContextMenudel" data-url="${ctxPathA}/oa/seats/del">删除</li>
	    </ul>
	</div>
</div>
<script type="text/javascript">
var contextMenus =  $("#seatContextMenu").find("li").length;
if (contextMenus > 0) {
	$(".datatr td").contextMenu('seatContextMenu', {
		onContextMenu: function(e) {	
			// 是否显示
	    	// if ($(e.target).hasClass('bluebg')) return true;
			return true;
	  	},
	  	onShowMenu: function(e, menu) {
	  		// alert(event.ucid);
	  		// $('#split', menu).remove();//选中多项只能合并
	    	return menu;
	  	},
	  	bindings: {
			'seatContextMenuedit': function(t) {
				// 编辑	
				ShieldJS.openDialog($("#seatContextMenuedit").data("url"), {'id':t.id}, function(dialogE, dialog){
					//页面处理
			    	ShieldJS.core.bindHtmlAction(dialogE);
			    	ShieldJS.form.initSubmit(dialogE, function(){
			    		dialog.remove();
			    		ShieldJS.siderE.find("."+ShieldJS.css.THIS).click();
			    	});
				}, '修改座次信息');
			},
			'seatContextMenudel': function(t) {
				if(confirm("该操作不可恢复！确定删除该记录吗？")){
					// 删除
					ShieldJS.HtmlAction.postData($("#seatContextMenudel").data("url"), {'id':t.id}, null, null, null, null, function(){
						$(t).html("");
					});
				}
			}
		}	
	});
}
/* $(".datatr td").each(function(){
	var $this = $(this);
	var qtipContent = $this.data("qtipContent");
	if(!qtipContent){
		if ($this.attr("userId")) {
			ShieldJS.ajax.post("${ctxPathA}/oa/seats/getUserJson",{'id':$this.attr("userId")},function(result){
				qtipContent = "";
				if (result.success) {
					if (result.data) {
						qtipContent = '<b class="userName">'+result.data.userName+'</b>';
						qtipContent += '<div>电　　话：'+result.data.mobile+'</div>';
						qtipContent += '<div>邮　　箱：'+result.data.email+'</div>';
						qtipContent += '<div>入职时间：'+(result.data.entryDate?moment(result.data.entryDate).format("YYYY年M月D日"):'')+'</div>';
                    }
	            }
				$this.data("qtipContent", qtipContent);
			}, null, "json", false);
        } else{
        	qtipContent = "未关联用户！";
        }
		$this.data("cont", qtipContent);
	}
	
});   */
/* 拖拽调整，暂不实现 */
/* $(".datatr td.draggable").draggable({ 
	stop: function(event, ui){
		
	}
});
$(".datatr td.draggable").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) {
    	var draggableE = ui.draggable;
    	var oriVal = draggableE.find(".showUserName").text();
    	var oriClass = draggableE.attr("tdclass");
    	var newVal = $(this).find(".showUserName").val();
    	var newClass = $(this).attr("tdclass");
    	alert(ui.draggable.html());
    	$(this).attr("tdclass", oriClass);
    	$(this).removeClass(newClass).addClass(oriClass);
    	$(this).find(".showUserName").text(oriVal);
    	draggableE.attr("tdclass", newClass);
    	draggableE.removeClass(oriClass).addClass(newClass);
    	draggableE.find(".showUserName").text(newVal);
    	
    	alert("已放置！");
    	siderE.find("."+ShieldJS.css.THIS).click();
    }
}); */
</script>
	
</shield:permssion>
